<div class="row">
    {% for service in ont_info %}
    <div class="col-md-auto">

        <div class="accordion">

          <div class="accordion-item">
            <h2 class="accordion-header" id="panelsStayOpen-headingOne">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panel-{{ service.type }}" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
              {{ service.index }} | {{ service.type }}
              </button>
            </h2>


            <div id="panel-{{ service.type }}" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingOne">
              <div class="accordion-body">

                <div class="alert alert-secondary text-center" role="alert">
                    {% if service.mac %}
                        {{ service.mac }}
                    {% else %}
                        no MAC
                    {% endif %}
                </div>

                <div>
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-primary">{{ service.ipv4_access_type }}</button>
                  {% if service.ipv4_status == 'Disconnected' %}
                      <button type="button" class="btn btn-danger">Disconnected</button>
                  {% elif service.ipv4_status == 'Connecting' %}
                      <button type="button" class="btn btn-secondary">Connecting...</button>
                  {% else %}
                      <a style="user-select: text" class="btn btn-light">{{ service.ipv4_address }}</a>
                      <button type="button" class="btn btn-dark">{{ service.subnet_mask }}</button>
                  {% endif %}

                </div>
                </div>
                <br>
                <div>
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-primary">Manage VLAN</button>
                  <button type="button" class="btn btn-light">{{ service.manage_vlan }}</button>
                </div>
                </div>

              </div>
            </div>
          </div>

        </div>

    </div>
    {% endfor %}

</div>